<template>
	<view class="page-container page-bottom">
		<view class="top mb28">
			<view class="fwb fs33 c333 mb28">{{detail.name}}</view>
			<view class="info fs22 c999">
				<view class="mb20">预警类型：垃圾满溢</view>
				<view class="mb20">预警时间：{{detail.alarmTime}}</view>
				<view>预警地点：{{detail.address}}</view>
				<view class="status cfff fs20 text-center"   :class="{status2:detail.status==2}">{{detail.status==1?'未处理':'已处理'}}</view>
			</view>
		</view>
		<view class="card_box">
			<view class="c333 fwb mb28">抓拍照片</view>
			<image   :src="$fullImage(detail.picUrl)" mode="aspectFill"></image>
		</view>

		<view class="sub_box" v-if="detail.status==1">
			<button>去处理</button>
		</view>
		
		<view v-else class="card_box mt28">
			<view>
				<view class="fwb c333 mb28">处理信息</view>
				<view class="flex mb28">
					<view class="c666 flex-sk0">处理人员：</view>
					<view class="c333">{{detail.handlePerson}}</view>
				</view >
				<view class="flex mb28">
					<view class="c666 flex-sk0">处理时间：</view>
					<view class="c333">{{detail.handleTime}}</view>
				</view>
				<view class="flex mb28">
					<view class="c666 flex-sk0">处理意见：</view>
					<view class="c333">{{detail.handleContent}}</view>
				</view>
			</view>
			<view>
				<view class="fwb c333 mb28">处理附件</view>
				<scroll-view scroll-x class="images w100" >
					<image  :src="$fullImage(detail.handleAtta)" mode="aspectFill" class="mr28"></image>
				</scroll-view>
			</view>
		</view>

	</view>
</template>

<script>
	import {getAction,gateway} from '@/utils/api.js'
	export default {
		data() {
			return {
				detail:{}
			}
		},
		methods: {
			getDetail(id){
				let params={id}
				getAction(gateway.busscommon+ '/aiot/farmDeviceAlarm/list',params).then(res=>{
					if(res.code==200){
						this.detail=res.result.records[0] || {}
					}
				})
			}

		},
		onLoad(e) {
			this.getDetail(e.id)
		}
	}
</script>

<style lang="less" scoped>
	.info {
		position: relative;

		.status {
			position: absolute;
			right: 0;
			top: 0;
			width: 84.72rpx;
			height: 84.72rpx;
			line-height: 84.72rpx;
			background: #423dd4;
			border-radius: 16.67rpx;
			&.status2{
				background: #628fcb;
			}
		}

	}

	.card_box {
		image {
			width: 100%;
			height: 394.44rpx;
		}
	}
	.images{
		white-space: nowrap;
		image{
			width: 164.58rpx;
			height: 164.58rpx;
			background: #ffffff;
			border: 0.69rpx solid #999999;
			border-radius: 5.56rpx;
		}
	}
</style>